<template lang="">
    <div  style="width:99%;margin:0 auto">
        <h1>库位管理</h1>
<el-divider></el-divider>
<el-form :inline="true" :model="serdate" class="demo-form-inline demo-form-inline-left">
  <el-form-item label="库位编号">
    <el-input v-model="serdate.locationCode" placeholder="库位编号"></el-input>
  </el-form-item>
  <el-form-item label="库位名称">
    <el-input v-model="serdate.locationName" placeholder="库位名称"></el-input>
  </el-form-item>
  <el-form-item label="仓库">
   <el-select v-model="serdate.warehouseId"  placeholder="仓库" clearable style="width:100%">
    <el-option label="请选择" :value="0" >请选择</el-option>
      <el-option v-for="item in getWarehousBoxList" :key="item.id" :label="item.name" :value="item.id"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary"  @click="getLocationDtoPesmethod" icon="el-icon-search">查询</el-button>
    <el-button type="primary"  @click="reseted" class="el-icon-refresh-right">重置</el-button>
    <el-button type="success" @click="Add">添加</el-button>
 <el-button type="danger" @click="getdels">批量删除</el-button>
 <el-button type="success" @click="exportListToExcel(multipleSelection)">导出<i class="el-icon-upload el-icon--right"></i></el-button>
  </el-form-item>
</el-form>

        <template>
  <el-table
    :data="GetlocationList"
    border
    style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="id"
      label="库位序号"
      >
    </el-table-column>
    <el-table-column
      prop="locationCode"
      label="库位编号"
    >
    </el-table-column>
    <el-table-column
      prop="locationName"
      label="库位名称">
    </el-table-column>
      <el-table-column
      prop="locationType"
      label="库位类型">
    </el-table-column>
    <el-table-column
      prop="locationarea"
      label="库位面积">
    </el-table-column>
    <el-table-column
      prop="name"
      label="仓库">
    </el-table-column>
    <el-table-column
      prop="isDefault"
      label="是否默认">
      <template slot-scope="scope">
        {{scope.row.isDefault?'启用':'禁用'}}
      </template>
    </el-table-column>
     <el-table-column
      prop="isDisable"
      label="是否禁用">
      <template slot-scope="scope">
        {{scope.row.isDisable?'启用':'禁用'}}
      </template>
    </el-table-column>
     <el-table-column
      prop="createTime"
      label="创建时间">
       <template slot-scope="scope">
        {{scope.row.createTime.substr(0,10)}}
      </template>
    </el-table-column>
     <el-table-column
      prop="remarks"
      label="备注">
    </el-table-column>
    <el-table-column
      label="操作列" width="200px">
      <template slot-scope="scope" >
        <el-link type="warning" @click="Update(scope.row.id)">编辑</el-link>
        <el-link type="success" @click="disable(scope.row.id)"> {{scope.row.isDisable?'禁用':'启用'}}</el-link>
         <el-link type="danger" @click="deletelocation(scope.row.id)"> 删除</el-link>
      </template>
    </el-table-column>
  </el-table>
</template>
<!-- 分页 -->
<el-form :inline="true" :model="formInline" class="btu">
  <el-form-item>
共{{page.totalCount}}条,共{{page.pageCount}}页,当前{{page.page}}/{{page.page.pageCount}}页,每页显示{{page.size}}条
    </el-form-item>
  <el-form-item>
<el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.page"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="page.size"
      layout=" sizes,slot, prev, pager, next, jumper"
      :total="page.totalCount" prev-text="上一页" next-text="下一页">
    <button @click="handleCurrentChange(1)" :disabled="page.page==1">首页</button>
    </el-pagination>
    </el-form-item>
  <el-form-item>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.page"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="page.size"
      layout=" slot, jumper"
      :total="page.totalCount" prev-text="上一页" next-text="下一页">
    <button @click="handleCurrentChange(page.pageCount)" :disabled="page.page==page.pageCount">首页</button>
    </el-pagination>
    </el-form-item>
</el-form>
 
    </div>
</template>
<script>
import { GetWarehousBox, GetLocationDtoPes, DeleteLocationIsDisable, DeletesLocationIsDisable, UpdateLocationIsDisable } from "@/api/BasicsDatumServer/locationServers";
import XLSX from 'xlsx';
export default {

  //数据
  data() {
    return {
      //查询数据
      formInline: {},
      serdate: {
        locationCode: "",
        locationName: "",
        warehouseId: 0,
      },
      //库位列表
      GetlocationList: [],
      //仓位列表（下拉）
      getWarehousBoxList: [],
      page: {
        page: 1,
        size: 5,
        totalCount: 0,
        pageCount: 0,
      },
      //
      multipleSelection: [],
    }
  },
  //计算属性
  computed: {
    sid() {
      var sid = [];
      this.multipleSelection.forEach((item) => {
        sid.push(item.id);
      })
      return sid;
    },
  },
  //方法
  methods: {
    //重置
    reseted() {
      this.serdate.locationCode = "";
      this.serdate.locationName = "";
      this.serdate.warehouseId = 0;
      this.getLocationDtoPesmethod();
    },
    //导出
    exportListToExcel(dataList) {
      // 过滤需要导出的字段
      const filteredData = dataList.map(item => {
        return {
          编号: item.id,
          库位编号: item.locationCode,
          库位名称: item.locationName,
          库位类型: item.locationType,
          仓库: item.name,
          面积: item.locationarea,
          创建时间: item.createTime,
          备注: item.remarks,
          是否禁用: item.isDisable ? "启用" : "禁用",
          是否删除: item.isDelete ? "已删除" : "未删除",
        };
      });
      const worksheet = XLSX.utils.json_to_sheet(filteredData);
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
      // 导出Excel文件
      XLSX.writeFile(workbook, '设备类型.xlsx');
      // 导出Excel文件   
      XLSX.writeFile(workbook, '库位列表.xlsx');
    },
    //编辑
    Update(id) {
      this.$router.push("/BasicsDatumServer/locationMangement/LocationUpd?id=" + id);
    },
    //添加
    Add() {
      this.$router.push("/BasicsDatumServer/locationMangement/LocationAdd");
    },
    //分页
    handleSizeChange(val) {
      this.page.size = val;
      this.getLocationDtoPesmethod();
    },
    handleCurrentChange(val) {
      this.page.page = val;
      this.getLocationDtoPesmethod();
    },

    //批量删除获取列表
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },
    //批量删除方法
    getdels() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: '请选择要删除的数据',
          type: 'warning'
        });
        return
      }
      var myparams = {
        delId: this.sid.toString(),
      }
      this.$confirm('此操作将永久批量删除该文件?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DeletesLocationIsDisable(myparams).then((res) => {
          if (res.data.code == 0) {
            this.$message({
              message: "批量删除成功",
              type: "success",
            });
            this.getLocationDtoPesmethod();
          } else {
            this.$message({
              message: "批量删除失败",
              type: "success",
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消批量删除'
        });
      });
    },
    //删除
    deletelocation(id) {
      var myparams = {
        id: id,
      }
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DeleteLocationIsDisable(myparams).then((res) => {
          if (res.data.code == 0) {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            this.getLocationDtoPesmethod();
          } else {
            this.$message({
              message: "删除失败",
              type: "success",
            });
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    //启用禁用
    disable(id) {
      var myparams = {
        id: id
      }
      UpdateLocationIsDisable(myparams).then((res) => {
        if (res.data.code == 0) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.getLocationDtoPesmethod();
        } else {
          this.$message({
            message: "修改失败",
            type: "success",
          });
        }
      })
    },

    //下拉框
    getWarehousBoxmethod() {
      GetWarehousBox().then((res) => {
        //console.log(res);
        this.getWarehousBoxList = res.data;
        //console.log(this.getWarehousBoxList);
      });
    },
    //获取库位列表
    getLocationDtoPesmethod() {
      var myparams = {
        locationCode: this.serdate.locationCode,
        locationName: this.serdate.locationName,
        warehouseId: this.serdate.warehouseId || 0,
        page: this.page.page,
        size: this.page.size,
      }
      GetLocationDtoPes(myparams).then((res) => {
        //console.log(res.data);
        this.GetlocationList = res.data.data;
        this.page.totalCount = res.data.totalCount;
        this.page.pageCount = res.data.pageCount;

      })
    },
  },
  //挂载
  mounted() {
    //仓库下拉
    this.getWarehousBoxmethod();
    //库位列表
    this.getLocationDtoPesmethod();
  }
}
</script>
<style lang="">
.btu{
   margin-top: 10px;
}
.custom-btn-container {
  text-align: right;
  margin-top: 10px;
  margin-right: 7%;
  margin-bottom: 10px;
}
.demo-form-inline-left {
  text-align: left;
}
</style>